import type { ProFormInstance } from '@ant-design/pro-form';
import { Col, Row } from 'antd';
import React, { useRef } from 'react';
import { useModel } from 'umi';

import {
  DrawerForm,
  ProFormDependency,
  ProFormDigit,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';

import * as c from '@/services/consts';
import { ProFormCheckbox } from '@ant-design/pro-components';
import { Card } from 'antd';
import Divider from 'antd/lib/divider';

type UpgradePackageFormProps = {
  visible: boolean;
  defaultProductId: number | undefined;
  current: API.UpgradePackageModel | undefined;
  onCancel: () => void;
  onSubmit: (values: API.UpgradePackageModel) => Promise<void>;
};

const UpgradePackageForm: React.FC<UpgradePackageFormProps> = (props) => {
  const { visible, defaultProductId, current, onCancel, onSubmit } = props;

  if (!visible) {
    return null;
  }

  let defaultCurrent: Partial<API.UpgradePackageModel> | undefined = undefined;
  if (!current) {
    defaultCurrent = {
      productId: defaultProductId,
      forced: false,
      status: true,
    };
  }

  const formRef = useRef<ProFormInstance>();

  const { getProductOptions } = useModel('useGlobalModel', (model) => ({
    getProductOptions: model.getProductOptions,
  }));

  const productOptions = getProductOptions(false);

  return (
    <DrawerForm<API.UpgradePackageModel>
      open={visible}
      initialValues={current ? current : defaultCurrent}
      formRef={formRef}
      title={`${current ? '编辑' : '添加'}更新包`}
      autoFocusFirstInput
      width={800}
      onFinish={onSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <Row gutter={24}>
        <Col span={24}>
          <ProFormSelect
            name="productId"
            label="产品"
            options={productOptions}
            rules={[{ required: true, message: '请选择产品' }]}
          />
        </Col>
        <Col span={12}>
          <ProFormSelect
            name="platform"
            label="平台"
            options={c.PlatformOptions}
            rules={[{ required: true, message: '请选择平台' }]}
          />
        </Col>
        <Col span={12}>
          <ProFormDependency name={['platform']}>
            {({ platform }) => {
              // console.log(formRef.current?.getFieldValue('channel'));
              // formRef.current?.setFieldsValue({
              //   channel: 'universal',
              // });

              const channelOptions = c.PlatformChannels[platform] ?? [''];

              return (
                <ProFormSelect
                  name="channel"
                  label="渠道"
                  options={channelOptions}
                  rules={[{ required: true, message: '请选择渠道' }]}
                />
              );
            }}
          </ProFormDependency>
        </Col>
        <Col span={12}>
          <ProFormDigit
            name="ver"
            label="版本号"
            min={1}
            max={9999}
            rules={[
              { required: true, message: '请输入版本号' },
              // { min: 1, message: '版本号只能是大于1的数字' },
            ]}
            placeholder="请输入版本号"
          />
        </Col>
        <Col span={12}>
          <ProFormSwitch name="forced" label="强制更新" />
        </Col>
        <Col span={24}>
          <ProFormText
            name="name"
            label="名称"
            rules={[{ required: true, message: '请输入名称' }]}
            placeholder="请输入名称"
          />
        </Col>
        <Col span={24}>
          <ProFormText
            name="url"
            label="更新包地址"
            rules={[{ required: true, message: '请输入更新包地址' }]}
            placeholder="请输入更新包地址"
          />
        </Col>
        <Col span={24}>
          <ProFormText
            name="md5"
            label="更新包MD5"
            placeholder="请输入更新包MD5"
          />
        </Col>
        <Col span={24}>
          <ProFormTextArea
            name="info"
            label="更新说明"
            fieldProps={{ rows: 8 }}
          />
        </Col>
      </Row>
      <Card title="升级策略" style={{ margin: 0, padding: 0 }}>
        <Row>
          <Col span={24}>
            <ProFormCheckbox.Group
              name={['policyConfig', 'memberLevels']}
              label="用户等级"
              options={c.MemberLevelOptions}
            />
          </Col>
        </Row>
        <Row>
          <Col span={11}>
            <ProFormSelect
              name={['policyConfig', 'appVerCompareMode']}
              label="版本比较"
              options={c.UpgradePackagePolicyAppVerCompareOptions}
            />
          </Col>
          <Col span={1}>&nbsp;</Col>
          <Col span={12}>
            <ProFormDigit
              name={['policyConfig', 'appVer']}
              label="版本号"
              min={0}
            />
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <ProFormSwitch name="partialUpgrade" label="按比例升级" />
          </Col>
          <Col span={12}>
            <ProFormDependency name={['partialUpgrade']}>
              {({ partialUpgrade }) => {
                if (partialUpgrade === true) {
                  return (
                    <ProFormDigit
                      name="partialUpgradePercent"
                      label="升级比例"
                      min={1}
                      max={100}
                      rules={[{ required: true, message: '请输入升级比例' }]}
                      placeholder="请输入升级比例"
                    />
                  );
                }
                return null;
              }}
            </ProFormDependency>
          </Col>
          <Col span={12}>
            <ProFormSwitch name="reminderInterval" label="间隔提醒" />
          </Col>
          <Col span={12}>
            <ProFormDependency name={['reminderInterval']}>
              {({ reminderInterval }) => {
                if (reminderInterval === true) {
                  return (
                    <ProFormDigit
                      name="reminderIntervalTimes"
                      label="间隔时间(小时)"
                      min={1}
                      max={720}
                      rules={[
                        { required: true, message: '请输入间隔时间(小时)' },
                      ]}
                      placeholder="请输入间隔时间(小时)"
                    />
                  );
                }
                return null;
              }}
            </ProFormDependency>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <Divider orientation="left" orientationMargin="0">
              仅指定用户升级
            </Divider>
          </Col>
          <Col span={24}>
            <ProFormTextArea
              name="forceUsers"
              label="Token(多用户换行)"
              fieldProps={{ rows: 15 }}
            />
          </Col>
        </Row>
      </Card>
      <Row>
        <Col span={24}>&nbsp;</Col>
        <Col span={24}>
          <ProFormSwitch name="status" label="状态" />
        </Col>
        <Col span={24}>
          <ProFormTextArea
            name="remark"
            label="备注"
            fieldProps={{ rows: 12 }}
          />
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default UpgradePackageForm;
